<template>
	<div class="fixed_chat no_close">
		<div class="fixed_chat_icon_wrap" :class="{'is_official':is_official}" v-show="chatIconFlag">
			<div class="chat-private-icon-wrap svg-icon-wrap" title="私聊" @click="privateChat" :class="{'has-new-message':privateStartTips}"><svg-icon icon-class="privateChat"></svg-icon></div>
			<div class="chat-public-icon-wrap svg-icon-wrap" title="公聊" @click="publicChat"><svg-icon icon-class="publicChat"></svg-icon></div>
			<div class="gift-icon-wrap svg-icon-wrap" title="礼物" @click="goApp" v-if="!is_official"><svg-icon icon-class="gift"></svg-icon></div>
			<div class="home-icon-wrap svg-icon-wrap" title="关闭回首页" @click="backHome" v-if="roompara.logo_op"><svg-icon icon-class="close"></svg-icon></div>
			<div class="svg-icon-wrap" v-if="roompara.display_team_index"><router-link :to="`/${$parent.eng_name}`">团队</router-link></div>
		</div>
		<!--公聊start-->
		<div class="mode0-public-wrap" v-show="publicChatFlag">
			<div class="public-chat-outer-wrap">
				<div class="public-chat-cover" @click="chatClose"></div>
				<div class="public-chat-wrap">
					<div class="public-chat-inner-wrap">
						<div class="public-chat-inner-input-wrap"><input type="text" autocapitalize="off" v-input ref="publicInput" v-model="msg" maxlength="99" @keyup.enter="sendMessage"></div>
						<button class="public-send-btn" @click="sendMessage">发送</button>
					</div>
					<div class="face-icon-wrap" @click="$parent.emojiTan">
					  <svg-icon icon-class="face"
					            style="width:2.25rem;height: 2.25rem;"></svg-icon>
					</div>
				</div>
			</div>
			<div class="emoji-wrap" :class="[$parent.emojiShow ? 'emoji0-move-in' : 'emoji0-move-out',$parent.emojiLoad ? 'no-emoji-move' : '']">
				<div class="emoji-inner-wrap">
					<div class="emoji-cell" v-for="(item,index) in faceAlt" :key="index">
						<img :src="faceImgArr[index]" :alt="faceAlt[index]" class="emoji-img" @click="chooseFace(faceAlt[index])">
					</div>
				</div>
			</div>
		</div>
		<!--公聊end-->
		<!--私聊列表start-->
		<div class="mode0-private-wrap mode0-private-list-wrap" :class="{'active':privateFlag}">
			<div class="private-chat-cover" @click="chatClose"></div>
			<div class="private-chat-wrap">
				<div class="private-chat-header" style="padding-left: 25px;">私聊<i class="icon-close" @click="chatClose"></i></div>
				<div class="private-chat-list-wrap">
					<div class="private-chat-list-inner-wrap">
						<ul v-if="privateChatArray.length>0">
							<li class="private-chat-list-li fix" v-for="(item,index) in privateChatArray" :key="index" @click="selectedDetail(item)">
								<a href="javascript:;" style="display: block;height: 100%;">
									<div class="private-metainfo-left userrand fl">
										<i v-if="item.level === 500" class="teacher"></i>
										<i v-else-if="item.level === 900" class="admin"></i>
										<i v-else-if="item.level === 2000" class="shi"></i>
										<i v-else-if="item.level === 4000" class="tuan"></i>
										<i v-else-if="item.appdata.title <= 12" :class="'rank'+item.appdata.title"></i>
										<i v-else-if="item.appdata.title > 12" class="rank12"></i>
										{{item.appdata.nickname}}
									</div>
									<div class="private-metainfo-right"><i class="private-icon" :class="{'has-new-message':item.messageFlag}"></i></div>
								</a>
							</li>
						</ul>
						<div style="padding-top: 5px;color: #666;text-align: center;" v-else>暂无可私聊人员~</div>
					</div>
				</div>
				<div class="private-chat-footer"></div>
			</div>
		</div>
		<!--私聊end-->
		<div class="mode0-private-wrap mode0-private-detail-wrap" :class="{'active':privateDetail}">
			<div class="private-chat-cover" @click="chatClose"></div>
			<div class="private-chat-wrap private-detail-chat-wrap">
				<div class="private-chat-header" v-if="selectedItem"><i class="icon-back" @click="privateDetailBack"></i>{{selectedItem.appdata.nickname}}<i class="icon-close" @click="privateDetailChatClose"></i></div>
				<div class="private-chat-content-wrap" ref="privateinnerwrap">
					<div class="private-chat-content-inner-wrap">
						<ul class="private-chat-content-ul" v-if="selectedItem && privateChatMap[selectedItem.uid]">
							<li v-for="(item,index) in privateChatMap[selectedItem.uid]" :key="index">
								<div v-if="item.from_uid == xmessager.uid" class="my-message-wrap fix"><div class="my-message-inner-wrap fr"><div class="my-send-message" v-html="item.message"></div><div class="my-name">{{item.from_nickname}}</div></div></div>
								<div v-else class="other-message-wrap"><div class="other-message-inner-wrap"><div class="other-name">{{item.from_nickname}}</div><div class="other-send-message" v-html="item.message"></div></div></div>
							</li>
						</ul>
					</div>
				</div>
				<div class="public-chat-wrap">
					<div style="position: relative;">
						<div class="public-chat-inner-wrap private-chat-inner-wrap">
							<div class="public-chat-inner-input-wrap"><input type="text" autocapitalize="off" ref="privateInput" v-input v-model="msg" maxlength="99" @keyup.enter="sendMessage"></div>
							<button class="public-send-btn" @click="sendMessage">发送</button>
						</div>
						<div class="face-icon-wrap" @click="$parent.emojiTan">
						  <svg-icon icon-class="face"
						            style="width:2.25rem;height: 2.25rem;"></svg-icon>
						</div>
					</div>
					<div class="emoji-wrap" :class="[$parent.emojiShow ? 'emoji0-move-in' : 'emoji0-move-out',$parent.emojiLoad ? 'no-emoji-move' : '']">
						<div class="emoji-inner-wrap">
							<div class="emoji-cell" v-for="(item,index) in faceAlt" :key="index">
								<img :src="faceImgArr[index]" :alt="faceAlt[index]" class="emoji-img" @click="chooseFace(faceAlt[index])">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<alert-bind-phone v-show="appDownload">
			<template #content>
				<div class="content">下载app才可以送礼！</div>
			</template>
			<template #footbtn><!-- <div class="alert-bind-btn">确定</div> --><div class="alert-bind-a-wrap" style="margin-top: 1.25rem;"><a class="alert-bind-a" href="javascript:;" style="text-decoration: underline;" @click="appDownload = false">关闭</a></div></template>
		</alert-bind-phone>
	</div>
</template>

<script>
	import alertBindPhone from '@/views/alert_bind_phone/index'
	import input from '@/directive/input/input'
	import {mapGetters} from 'vuex'
	import {sendMessageApi} from '@/api/room'
	import {autoScroll,addClass,removeClass,hasClass,iosInputScroll,isAndroid} from '@/utils'
	import SmartScroll from '@/utils/SmartScroll'
	export default{
		name:'tempalte0Chat',
		props:{
			xmessager:{
				type:Object
			},
			roomPassword:{
				type:String
			}
		},
		components:{
			alertBindPhone
		},
		data(){
			return{
				msg:'',
				sendSecond:0,
				chatIconFlag:true,
				publicChatFlag:false,
				privateFlag:false,
				privateDetail:false,
				selectedItem:null,
				privateChatArr:[],
				privateStartTips:false,
				privateMiddleTips:false,
				appDownload:false,
				faceImgArr:[],
				faceAlt:[],
				is_official: typeof(window.is_official) !== 'undefined' ? window.is_official : false
			}
		},
		directives:{
			input
		},
		computed:{
			...mapGetters([
			  'privateChatMap',
				'privateChatArray',
				'token',
				'roompara',
				'user'
			])
		},
		created(){
			this.faceImgArr = this.$parent.faceImgArr
			this.faceAlt = this.$parent.faceAlt
		},
		methods:{
			sendMessage(){
				if(!this.user.logined){
					this.$layer.open({
						content: '登录之后才可以进行聊天!'
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					});
					return false;
				}
				if(!this.xmessager.logined){
					this.$layer.open({
						content: '聊天服务器已断开连接,请刷新或退出房间重试!'
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					});
					return false;
				}
				if(this.msg === ''){
					this.$layer.open({
						content: '发送内容不能为空!'
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					});
					return false;
				}
				if(this.xmessager.chatdisable > 0){
					this.$layer.open({
						content: '你目前处于禁止发言状态，不能发言！'
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					});
					return false;
				}
				if(this.sendSecond === 0){
					let sendInter = setInterval(()=>{
						this.sendSecond++
						if(this.sendSecond === 4){
							clearInterval(sendInter) 
							sendInter = null
							this.sendSecond = 0
						}
					}, 1000)
					let secret = 0
					let UserSelectedUid = 0
					let to_u = this.selectedItem
					if(to_u){
						secret = 1
						UserSelectedUid = to_u.uid
					}
					let to_room_id = to_u && to_u.appdata ? to_u.appdata.room_id : 0
					const index = this.$layer.open({
						type:2,
						content: '发送中...'
					})
					sendMessageApi({_token:this.token,to_room_id,room_id:this.roompara.room_id,secret,to_uid:UserSelectedUid,message:this.msg,room_password:this.roomPassword}).then(res=>{
						if(res.code === 0){
							this.$layer.close(index)
							this.msg = ''
						}
					}).catch(err=>{
						// if(this.selectedItem){
						// 	this.$refs.privateInput.blur()
						// }else{
						// 	this.$refs.publicInput.blur()
						// }
						// if(isAndroid){
						// 	document.documentElement.style.height = window.innerHeight + 'px'
						// }
						this.$layer.close(index)
					})
				}else{
					// if(this.selectedItem){
					// 	this.$refs.privateInput.blur()
					// }else{
					// 	this.$refs.publicInput.blur()
					// }
					// if(isAndroid){
					// 	document.documentElement.style.height = window.innerHeight + 'px'
					// }
					this.$layer.open({
						content: '发送消息太快了，请稍等'+(4-this.sendSecond)+'秒'
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					});
					return false;
				}
			},
			closePrivate(){
				this.priActive = !this.priActive
				this.$store.dispatch('setPriTips',false)
				if(this.priActive && this.privateChatArr[0] && this.priUserSelectedUid === 0){
					this.priUserSelectedUid = this.privateChatArr[0].uid
				}
			},
			publicChat(){
				if(!this.user.logined){
					this.$router.push('/login')
					return false;
				}
				this.chatIconFlag = false
				this.publicChatFlag = true
				if(!this.$parent.emojiShow){
					this.$parent.emojiLoad = true
				}
				this.$nextTick(()=>{
					if(!hasClass(document.documentElement,'noscroll')){
						addClass(document.documentElement,'noscroll')
					}
					this.$refs.publicInput.focus()
				})
			},
			chatClose(){
				this.publicChatFlag = false
				this.privateFlag = false
				this.privateDetail = false
				this.msg = ''
				this.chatIconFlag = true
				this.selectedItem = null
				removeClass(document.documentElement,'noscroll')
			},
			privateChat(){
				if(!this.user.logined){
					this.$router.push('/login')
					return false;
				}
				this.chatIconFlag = false
				this.privateFlag = true
				this.privateStartTips = false
				if(!hasClass(document.documentElement,'noscroll')){
					addClass(document.documentElement,'noscroll')
				}
			},
			selectedDetail(item){
				this.selectedItem = item
				this.privateFlag = false
				this.privateDetail = true
				if(item.messageFlag){
					item.messageFlag = false
				}
			},
			privateDetailBack(){
				this.selectedItem = null
				this.privateFlag = true
				this.privateDetail = false
				this.privateStartTips = false
			},
			privateDetailChatClose(){
				this.chatClose()
			},
			goApp(){
				if(!this.user.logined){
					this.$router.push('/login')
					return false;
				}
				this.appDownload = true
			},
			privateChatScroll(el){
				autoScroll(el)
			},
			backHome(){
				window.location.href = '/'
			},
			chooseFace(content){
				this.msg = this.msg + content
			}
		},
		watch:{
			priUserSelectedUid(val,oldVal){
				this.priUserSelectedUid = val
			}
		},
		mounted(){
			//此为弹层出来禁止整个窗体滚动
			// new SmartScroll(document.querySelector('.mode0-private-detail-wrap'),document.querySelector('.private-chat-content-wrap'))
			new SmartScroll(document.querySelector('.mode0-private-list-wrap'),document.querySelector('.private-chat-list-wrap'))
		}
	}
</script>
<style scoped lang="scss">
	.fixed_chat{
		.fixed_chat_icon_wrap{
			position: absolute;
			bottom: 20px;
			left: 0;
			right: 0;
			display: flex;
			justify-content: space-around;
			&.is_official{
				.chat-public-icon-wrap{
					left: 10.5rem !important;
				}
				.chat-private-icon-wrap{
					left: 3.5rem !important;
				}
				.home-icon-wrap{
					right: 3.3rem !important;
				}
			}
			.chat-icon{
				display: inline-block;
				width: 2.75rem;
				height: 2.75rem;
				vertical-align: top;
				margin-right: 18px;
			}
			.svg-icon-wrap{
				position: relative;
				a{
					display: block;
					width: 2.75rem;
					height: 2.75rem;
					line-height: 2.75rem;
					background-color: #4360F0;
					border-radius: 50%;
					text-align: center;
					font-size: 0.87rem;
					color: #fff;
				}
			}
			.chat-private-icon-wrap.has-new-message::after{
				content: '';
				position: absolute;
				width:8px;
				height: 8px;
				border-radius: 50%;
				background-color: red;
				right: 8px;
				top:10px;
			}
		}
		.public-chat-inner-wrap{
			position: absolute;
			display: flex;
			height: 52px;
			left: 0;
			right: 3.12rem;
			top:0;
			bottom: 0;
			margin: auto;
			align-items: center;
			padding: 0 50px;
			background-color: #fff;
		}
		.private-chat-inner-wrap{
			padding-right: 6.25rem;
		}
		.face-icon-wrap{
			position: absolute;
			top: 0;
			bottom: 0;
			width: 2.25rem;
			height: 2.25rem;
			margin: auto;
			right: 3rem;
		}
		.public-chat-inner-input-wrap{
			height: 33px;
			flex: 1;
			border-radius: 100px 0 0 100px;
			border: 1px solid #dfdfdf;
			border-right: none;
			input{
				width: 100%;
				padding-left: 15px;
				height: 100%;
				line-height: 33px;
				box-sizing:border-box;
				background-color: transparent;
			}
		}
		.public-send-btn{
			height: 35px;
			width: 50px;
			background: #4360F0;
			border:0 none;
			border-radius: 0 100px 100px 0;
			color: #fff;
			line-height: 35px;
		}
		.mode0-public-wrap{
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #fff;
			.public-chat-cover{
				position: fixed;
				top:0;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: rgba(0,0,0,.4)
			}
			.public-chat-wrap{
				position: relative;
				height: 52px;
				background-color: #fff;
			}
			@include face-style;
			.emoji-wrap{
				will-change: margin;
			}
		}
		.mode0-private-wrap{
			position: absolute;
			top:0;
			bottom: 0;
			left: 0;
			right: 0;
			visibility:hidden;
			transition: visibility .25s;
			@include face-style;
			.public-chat-wrap{
				position: relative;
			}
			.private-chat-cover{
				position: fixed;
				top:0;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: rgba(0,0,0,.4);
				opacity: 0;
				transition: opacity .25s;
			}
			.private-chat-wrap{
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				transition: transform .15s;
				.private-chat-header{
					position: relative;
					width:100%;
					height: 50px;
					background-color: rgba(255,255,255,.9);
					font-size: 16px;
					color: #232323;
					line-height: 50px;
					box-sizing:border-box;
					.icon-close{
						position: absolute;
						width: 14px;
						height: 14px;
						background: url(../../../../../assets/images/private-chat-close-icon.png) no-repeat;
						background-size:contain;
						top:0;
						bottom:0;
						margin: auto;
						right: 25px;
					}
				}
				.private-chat-list-wrap{
					height: 264px;
					background-color: #fff;
					overflow-y: auto;
					-webkit-overflow-scrolling:touch;
					.private-chat-list-inner-wrap{
						padding: 0 18px;
						ul li{
							position: relative;
							height: 52px;
							line-height: 52px;
							border-bottom: 1px solid #ddd;
							.private-metainfo-left{
								font-size: 15px;
								color: #4360F0;
								i{
									margin-right: 7px;
									vertical-align: -3px;
									border-radius:15px;
								}
							}
							.private-metainfo-right{
								position: absolute;
								top:0;
								bottom: 0;
								right: 5px;
								.private-icon{
									position: relative;
									display: inline-block;
									width: 39px;
									height: 18px;
									background: url(../../../../../assets/images/private-icon.png) no-repeat;
									background-size: contain;
									vertical-align: -5px;
								}
								.private-icon.has-new-message::after{
									content: '';
									position: absolute;
									width: 8px;
									height: 8px;
									border-radius: 50%;
									background-color: red;
									right: -3px;
								}
							}
						}
					}
				}
				.private-chat-footer{
					height: 35px;
					background-color: #fff;
					box-shadow:0 0 3px rgba(0,0,0,.1);
				}
			}
			.private-detail-chat-wrap.private-chat-wrap{
				.private-chat-header{
					text-align: center;
					.icon-back{
						position: absolute;
						width: 10px;
						height: 16px;
						left: 25px;
						top:0;
						bottom:0;
						margin: auto;
						background: url(../../../../../assets/images/icon-back.png) no-repeat;
						background-size: contain;
					}
				}
				.private-chat-content-wrap{
					height: 14.56rem;
					overflow-y: auto;
					-webkit-overflow-scrolling:touch;
					background-color: #D8D8D8;
					.private-chat-content-ul{
						overflow: hidden;
						li{
							margin: 0.62rem 0;
							padding: 0 1.56rem;
							color: #000;
							.private-face-img{
								vertical-align: middle;
							}
							.other-message-inner-wrap{
								div{
									display: inline-block;
									vertical-align: top;
								}
								.other-send-message{
									position: relative;
									padding: 0.31rem 0.62rem;
									max-width: 11.56rem;
									background-color: #fff;
									border-radius: 0.31rem;
									margin-left: 0.93rem;
									word-break: break-all;
									&::after{
										position: absolute;
										content: '';
										top:0;
										bottom: 0;
										margin-top: 0.31rem;
										left: -1.25rem;
										width: 0;
										height: 0;
										border-width: 0.5rem 0.75rem;
										border-style:solid;
										border-color: transparent #fff transparent transparent;
									}
								}
							}
							.my-message-wrap{
								.my-message-inner-wrap{
									div{
										display: inline-block;
										vertical-align: middle;
									}
									.my-send-message{
										position: relative;
										padding: 0.31rem 0.62rem;
										max-width: 11.56rem;
										background-color: #cdd5ff;
										border-radius: 0.31rem;
										margin-right: 0.93rem;
										word-break: break-all;
										img{
											vertical-align: middle;
										}
										&::after{
											position: absolute;
											top:0;
											bottom: 0;
											margin-top: 0.31rem;
											right: -1.25rem;
											content: '';
											width: 0;
											height: 0;
											border-width: 0.5rem 0.75rem;
											border-style:solid;
											border-color: transparent transparent transparent #cdd5ff;
										}
									}
								}
							}
						}
					}
				}
				.public-chat-inner-wrap{
					position: static;
				}
			}
		}
		.mode0-private-detail-wrap{
			visibility:hidden;
			transition: visibility .25s;
			.private-detail-chat-wrap{
				transform: translateX(100%)
			}
		}
		.mode0-private-list-wrap{
			.private-chat-wrap{
				transform: translateY(100%)
			}
		}
		.mode0-private-list-wrap.active{
			visibility: visible;
			transition: none;
			.private-chat-cover{
				opacity: .6
			}
			.private-chat-wrap{
				transform: translateY(0)
			}
		}
		.mode0-private-detail-wrap.active{
			visibility: visible;
			transition: none;
			.private-chat-cover{
				opacity: .6
			}
			.private-detail-chat-wrap{
				transform: translateX(0)
			}
		}
	}
</style>
<style scoped>
	/*私聊弹层z-inxdex:2*/
	input,select,textarea{-webkit-user-select:text}
	input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#fff}
	input:-moz-placeholder,textarea:-moz-placeholder{color:#fff}
	input::-moz-placeholder,textarea::-moz-placeholder{color:#fff}
	input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#fff}
	.siliao_btn{position:relative}.prv_count{position:absolute;width: 8px;height: 8px;background: red;border-radius: 50%;top: 8px;right:8px}
	.siliao_btn i{display:inline-block;width:21.5px;height:19.5px;background:url(../images/si.png);background-size:contain;margin:8px 10px 0 0}
	.siliao_btn b{position:absolute;width:8px;height:8px;background:#f01b1c;border-radius:50%;top:7px;right:10px;display:none}
	.fixed_chat{position:fixed;left: 0;bottom: 0;right:0;padding:0 0 20px 15px;z-index: 12;}
	.fixed_chat .face_detail{height:25vh;overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
	.fixed_chat .good{position:absolute;left:8.5px;top:6.5px;width:27px;height:27px;background:url(../images/good.png) no-repeat;background-size:contain}
	.fixed_chat .cinner{margin-right:10px;background:rgba(255,255,255,.2)}
	.fixed_chat .cinner .inner{position:relative;height:35px;line-height:35px}
	.fixed_chat .cinner .line{position:absolute;bottom:0;height:6px;width:1px;background:#fff}
	.fixed_chat .cinner .line1{left:0}
	.fixed_chat .cinner .line2{right:0}
	.fixed_chat .cinner .face{position:absolute;right:12px;top:6px;width:21px;height:21px;background:url(../images/face.png) no-repeat;background-size:contain}
	.fixed_chat .cinner p{padding:0 36px 0 10px;color:#f1f1f1}
	.fixed_chat .cinner input{width:100%;border:0 none;background:0 0;font-size:12px;color:#f1f1f1}
	.fixed_chat .send{width:54px;height:35px;background:rgba(255,255,255,.2);font-size:14px;color:#fff;text-align:center;line-height:35px}
	.prv_dialog{position: fixed;top:0;right:0;bottom: 56px;left: 0;z-index: 2;visibility: hidden;overflow: hidden;transition: visibility .25s;}
	.prv_dialog .pri_area{position: absolute;bottom: 0;width:100%;transform:translateY(100%);-webkit-transition:transform .15s;}
  .prv_dialog .prv_chat{font-size:12px;color:#f1f1f1;background:#1f3b57;padding:8px 50px}
	.prv_dialog .pri_area .selectModel{display:inline-block;position:relative;font-size:16px}
	.prv_dialog .pri_area #message_to {position: absolute;top: 0;left: 0;opacity: 0;width: 170%;}
	.prv_dialog.active{visibility: visible;transition: none;}
	.prv_dialog.active .tab_cover{opacity: .8;}
	.prv_dialog.active .pri_area{transform: translateY(0);}
	.pri_area_close{position:absolute;width:20px;height:20px;background:url(../images/pri-close.png) no-repeat;background-size:contain;top:10px;right:10px;z-index:19940903}
	.my-send-message >>> img{
		vertical-align: middle;
	}
</style>
<style>
	.prv_dialog li{color: #fff;font-size: 14px;}
	.prv_dialog .prv_wrap{padding:20px 16px;height:145px;background:rgba(56,73,89,.6);overflow-y:auto;-webkit-overflow-scrolling:touch}
	.prv_dialog .me,.prv_dialog .nickname{font-size:14px;color:#2387dc;word-break:break-all;margin:0 5px}
	.prv_dialog .time{font-size:12px;color:#a1a1a1}
	.prv_dialog .chat_content{font-size:14px}
	.private-chat-content-ul .private-face-img{vertical-align: middle;}
</style>
